<template>
	<view class="wrap safe-area flex column align-center">
		<publishCommonArticle v-if="article_id" :article_id="article_id"></publishCommonArticle>

		<view class="wrap-white-bg">
			<block v-for="(item, index) in list" :key="index">
				<rowGroup
					:item="item"
					v-model="dataInfo[item.key]"
					v-if="item.type === 'group' && item.direct === 'row' && item.isShow"
				/>

				<unitInput
					v-else-if="item.type === 'input' && item.direct === 'unit' && item.isShow"
					:item="item"
					v-model="dataInfo[item.key]"
				/>

				<couponInput
					v-else-if="item.type === 'input' && item.direct === 'coupon' && item.isShow"
					:item="item"
					v-model="dataInfo[item.key]"
					:full.sync="dataInfo.limit_money"
				/>

				<rowChoose
					:item="item"
					v-model="dataInfo[item.key]"
					v-else-if="item.type === 'choose' && item.direct === 'row' && item.isShow"
				/>

				<wrapRedPrice v-else-if="item.type === 'redPrice' && item.isShow" :item="item" />

				<wrapCouponTips v-else-if="item.type === 'coupon' && item.isShow" :item="item" />
			</block>
		</view>

		<view class="sure-btn theme-gradient-btn f-34" @click="onPay">确定支付</view>
	</view>
</template>

<script>
	import { AddBonus } from "@/API/article.js";
	import publishCommonArticle from "@/components/publishCommonArticle/publishCommonArticle.vue";
	import rowGroup from "@/components/form/rowGroup.vue";
	import unitInput from "@/components/form/unitInput.vue";
	import couponInput from "@/components/form/couponLimitInput.vue";
	import rowChoose from "@/components/form/rowChoose.vue";
	import wrapRedPrice from "@/components/form/redPrice.vue";
	import wrapCouponTips from "@/components/form/couponTips.vue";

	export default {
		components: {
			publishCommonArticle,
			rowGroup,
			unitInput,
			couponInput,
			rowChoose,
			wrapRedPrice,
			wrapCouponTips,
		},
		data() {
			return {
				article_id: "", //文章ID
				is_shop: 0,
				dataInfo: {
					type: "0", //红包类型  0:现金 1:优惠券
					num: "", //数量
					distribution_type: "0", //0=普通红包,1=拼手气红包
					money: "", //现金时为红包金额 优惠券时为减少金额
					limit_money: "", //优惠券的时候 使用条件
					end_time: "", //优惠券到期时间
				},
				type: "", //3:政务
			};
		},
		onLoad(options) {
			this.article_id = options.article_id;
			this.is_shop = options.is_shop;
			this.type = options.type;
		},
		watch: {
			"dataInfo.type": {
				handler(newVal, oldVal) {
					if (oldVal !== undefined) {
						this.dataInfo.num = "";
						this.dataInfo.money = "";
						this.dataInfo.end_time = "";
						this.dataInfo.limit_money = "";
					}
				},
				immediate: true,
			},
		},
		computed: {
			list() {
				return [
					{
						title: "选择推广类型",
						require: true,
						type: "group",
						direct: "row",
						key: "type",
						tips: "请选择推广类型",
						list:
							(this.is_shop == 1 && this.type !== "3")
								? [
										{ id: "0", title: "红包推广" },
										{ id: "1", title: "优惠券推广" },
								  ]
								: [{ id: "0", title: "红包推广" }],
						isShow: true,
					},
					{
						require: true,
						type: "input",
						direct: "unit",
						key: "money",
						place: "请输入红包总金额",
						tips: "请输入红包总金额",
						mode: "digit",
						maxlength: "6",
						unit: "元",
						isShow: this.dataInfo.type === "0",
					},
					{
						require: true,
						type: "input",
						direct: "unit",
						key: "num",
						place: "请输入红包总数量",
						tips: "请输入红包总数量",
						mode: "number",
						maxlength: "5",
						unit: "份",
						isShow: this.dataInfo.type === "0",
					},
					{
						title: "红包类型",
						require: true,
						type: "group",
						direct: "row",
						key: "distribution_type",
						tips: "请选择红包类型",
						list: [
							{ id: "0", title: "普通钱包" },
							{ id: "1", title: "拼手气红包" },
						],
						isShow: this.dataInfo.type === "0",
					},
					{
						type: "redPrice",
						title: "应付金额：",
						price: this.dataInfo.money === "" ? "0.00" : this.dataInfo.money,
						isShow: this.dataInfo.type === "0",
					},
					{
						require: true,
						type: "input",
						direct: "unit",
						key: "num",
						place: "请输入优惠券总数量",
						tips: "请输入优惠券总数量",
						mode: "number",
						maxlength: "6",
						unit: "份",
						isShow: this.dataInfo.type === "1",
					},
					{
						require: true,
						type: "input",
						direct: "coupon",
						key: "money",
						place: "请输入减少的金额",
						tips: "请输入减少的金额",
						mode: "digit",
						maxlength: "6",
						isShow: this.dataInfo.type === "1",
					},
					{
						title: "优惠券到期时间",
						require: true,
						type: "choose",
						key: "end_time",
						mode: "date",
						place: "请选择到期时间",
						direct: "row",
						list: [],
						tips: "请选择到期时间",
						isShow: this.dataInfo.type === "1",
					},
					{
						type: "coupon",
						title: "使用条件填写0为无门槛优惠券",
						isShow: this.dataInfo.type === "1",
					},
				];
			},
		},
		methods: {
			/**
			 * 支付
			 */
			onPay() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					let obj = { ...this.dataInfo };
					obj.article_id = this.article_id;

					this.$throttle(() => {
						AddBonus(obj).then((res) => {
							if (res.data.token === undefined) {
								this.$st.success("发布成功", () => {
									this.$jump.paySuccess("coupon", `&article_id=${this.article_id}`);
								});
							} else {
								this.$jump.goPay(res.data.token, res.data.list, `&article_id=${this.article_id}`);
							}
						});
					});
				}
			},
		},
	};
</script>

<style>
	@import "@/css/publish.css";
</style>
